import { ref } from 'vue'
import html2canvas from 'html2canvas'

/**
 * 用于导出生成image
 */
export function useExportImage() {
  const exportRef = ref()

  /**
   * 导出图片触发事件
   * @param fileName
   */
  function onExportImage(fileName) {
    const ele = exportRef.value
    if (!ele) {
      console.error('没有导出对象')
      return
    }
    const size = {
      width: ele.offsetWidth,
      height: ele.offsetHeight,
    }
    html2canvas(ele, { useCORS: true, logging: true }).then(async (canvas) => {
      const dataURL = canvas.toDataURL('image/png')
      await download(dataURL, size, fileName)
    })
  }

  async function download(imgUrl, size, fileName) {
    const dataUrl = await getBase64(imgUrl, size)
    const link: any = document.createElement('a')
    link.href = dataUrl
    link.download = `${fileName}.png`
    link.click()
  }

  function getBase64(url, size) {
    return new Promise((resolve) => {
      let canvas: any = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const img = new Image()
      // 允许跨域
      img.crossOrigin = 'Anonymous'
      img.src = url
      img.onload = () => {
        // eslint-disable-next-line prefer-destructuring
        canvas.height = size.height
        // eslint-disable-next-line prefer-destructuring
        canvas.width = size.width
        ctx!.drawImage(img, 0, 0, size.width, size.height)
        const dataURL = canvas.toDataURL('image/png')
        canvas = null
        resolve(dataURL)
      }
    })
  }

  return {
    exportRef,
    onExportImage,
  }
}
